import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from './store'

import { HomeWrapper, HomeLeft, HomeRight, AppQRDown } from './style'

import Topic from './component/Topic'
import List from './component/List'
import Writer from './component/Writer'
import Recommend from './component/Recommend'

class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className="banner-img"
            src="//upload.jianshu.io/admin_banners/web_images/4368/c19f9350ef08c469f8fd461d25db7e8d8780f334.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
            alt="轮播图"
          />

          <Topic />
          <List />
        </HomeLeft>
        <HomeRight>
          <Recommend />
          <AppQRDown>
            <img
              className="qrcode"
              alt=""
              src="//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png"
            />
            <div className="info">
              <p className="title">
                下载简书手机App
                <i className="sky-leaf">&#xe62b;</i>
              </p>
              <p className="desc">随时随地发现和创作内容</p>
            </div>
          </AppQRDown>
          <Writer />
        </HomeRight>
      </HomeWrapper>
    )
  }
  componentDidMount() {
    this.props.changeHomeData()
  }
}

const mapDispatch = dispatch => ({
  changeHomeData() {
    const action = actionCreators.getHomeInfo()
    dispatch(action)
  }
})

export default connect(
  null,
  mapDispatch
)(Home)
